<template>
  <div class="airPort">
    <!-- 查询条件 -->
    <el-form :model="ruleForm" ref="ruleForm" size="mini">
      <div style="display:flex;">
        <el-form-item label="短信发送手机号：" v-model="ruleForm.sendMoblie" prop="name"
          style="display: flex; margin: 0 20px 0 0">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="短信内容关键字：" v-model="ruleForm.smsContent" prop="name"
          style="display: flex; margin: 0 20px 0 0">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="接受短信开始时间：" prop="name" style="display: flex; margin: 0 20px 20px 0">
          <el-date-picker value-format='yyyy-MM-dd HH mm ss' v-model="ruleForm.receiveTime" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </div>
      <div style="display:flex;">
        <el-form-item label="接受短信结束时间：" prop="name" style="display: flex; margin: 0 20px 20px 0">
          <el-date-picker value-format='yyyy-MM-dd HH mm ss' v-model="ruleForm.receiveTimeBack" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="处理人" prop="name" style="display: flex; margin: 0 20px 0 0">
          <el-input v-model="ruleForm.employee"></el-input>
        </el-form-item>
        <el-form-item label="处理状态" prop="name" style="display: flex; margin: 0 20px 0 0">
          <el-select v-model="ruleForm.state" placeholder="请选择活动区域">
            <el-option label="全部" value=""></el-option>
            <el-option label="未处理" value="1"></el-option>
            <el-option label="已处理" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin: 0 20px 0 50px">
          <el-button type="primary" size="mini" @click="searchairPort">查询</el-button>
          <!-- <el-button type="primary" size="mini" @click="addButton">新增</el-button> -->
        </el-form-item>
      </div>

    </el-form>
    <!-- 用户列表区 -->
    <el-table style="margin:20px 0 0 0" size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" :data="airportLists" border stripe>
      <el-table-column label="短信编号" prop="smsId" width="100ppx"></el-table-column>
      <el-table-column label="短信发送手机号" prop="sendMoblie" width="140ppx"></el-table-column>
      <el-table-column label="短信内容" prop="smsContent"></el-table-column>
      <el-table-column label="短信处理时间" prop="operationDate" width="140ppx"></el-table-column>
      <el-table-column label="处理人" prop="employee" width="120ppx"></el-table-column>
      <el-table-column label="处理状态" prop="state">
        <template slot-scope="scope">
          <template v-if="scope.row.state=='1'">未处理</template>
          <template v-if="scope.row.state=='2'">已处理</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state=='1'" type="primary" size="mini" @click="dealwith(scope.row)">处理</el-button>
          <!-- <el-button
            type="primary"
            size="mini"
            @click="watcheditairliner(scope.row)"
            >修改</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="watcheditairliner(scope.row)"
            >设置失效</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
    <!-- 处理弹窗 -->
    <el-dialog title="审核" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false">
      <el-form :model="SMSaudit" class="demo-ruleForm">
        <el-form-item label="短信编号">
          <el-input :disabled="true" v-model="SMSaudit.smsId" size="mini" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="处理人" prop="hkgs">
          <el-input :disabled="true" style="width: 400px" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="处理时间" prop="hkgs">
          <el-input :disabled="true" style="width: 400px" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="短信内容" prop="smsContent">
          <el-input type="textarea" v-model="SMSaudit.smsContent" :rows="2" :disabled="true" style="width: 400px"
            size="mini"></el-input>
        </el-form-item>
        <el-form-item label="操作说明" prop="gsjc">
          <el-input type="textarea" v-model="SMSaudit.bak" :rows="2" style="width: 400px" size="mini"
            placeholder="操作说明"></el-input>
        </el-form-item>
        <el-form-item style="display:flex;margin:0 0 0 40%">
          <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button size="mini" @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 新增 -->
    <!-- <el-dialog title="新增" :visible.sync="dialogVadd" width="40%" :close-on-click-modal="false">
      <el-form :model="SMSadd" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="短信编号" prop="id">
          <el-input v-model="SMSadd.id" size="mini" style="width: 400px" placeholder="短信号码"></el-input>
        </el-form-item>
        <el-form-item label="短信发送手机号" prop="sendMoblie">
          <el-input v-model="SMSadd.sendMoblie" style="width: 400px" size="mini" placeholder="短信名称"></el-input>
        </el-form-item>
        <el-form-item label="短信内容" prop="smsContent">
          <el-input v-model="SMSadd.smsContent" style="width: 400px" size="mini" placeholder="维护人	"></el-input>
        </el-form-item>
        <el-form-item style="display:flex;margin:0 0 0 40%">
          <el-button size="mini" type="primary" @click="submitFormaded('ruleForm')">确定</el-button>
          <el-button size="mini" @click="dialogVadd=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 新增弹窗
        dialogVadd: false,
        // 审核表单
        SMSaudit: {
          bak: ""
        },
        pageTotal: 0,
        pageSize: 1,
        currentPage: 10,
        // 查询条件
        ruleForm: {
          sendMoblie: "",
          smsContent: "",
          receiveTime: "",
          receiveTimeBack: "",
          employee: "",
          state: "",
        },
        // 表格数据
        airportLists: [],
        // 新增表单
        SMSadd: {
          id: "",
          smsId: "",
          receiveTime: "",
          receiveMoblie: "",
          smsContent: "",
          sendMoblie: "",
        },
        // 新增弹窗
        dialogVisible: false,
        // 新增校验
        rules: {
          id: [{
            required: true,
            message: '请输入短信编号',
            trigger: 'blur'
          }, ],
          sendMoblie: [{
            required: true,
            message: '请输入短信发送手机号',
            trigger: 'blur'
          }, ],
          smsContent: [{
            required: true,
            message: '请输入短信内容',
            trigger: 'blur'
          }, ],
        },
        // 屏蔽状态下拉列别
        // shieldingList: [],
      };
    },
    methods: {
      // 新增短信接口
      // getsmsSat() {
      //   this.$axios.getsmsSat(this.SMSadd).then((res) => {
      //     console.log(res)
      //     if (res.code == 200) {
      //       this.$message({
      //         message: '新增成功',
      //         type: 'success'
      //       });
      //       this.getsmsContent()
      //       this.dialogVadd = false;
      //     }
      //   })
      // },
      // 新增按钮
      // addButton() {
      //   this.SMSadd.id= "",
      //   this.SMSadd.smsId= "",
      //   this.SMSadd.receiveTime= "",
      //   this.SMSadd.receiveMoblie= "",
      //   this.SMSadd.smsContent= "",
      //   this.SMSadd.sendMoblie= "",
      //   this.dialogVadd = true;
      // },
      // 新增确认按钮
      submitFormaded(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getsmsSat()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 查询及列表数据
      getsmsContent() {
        this.$axios.getsmsContent(this.ruleForm).then((res) => {
          console.log(res)
          this.airportLists = res.data
          this.pageTotal = res.total
        })
      },
      // 查询按钮
      searchairPort() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getsmsContent()
      },
      // 处理按钮
      dealwith(row) {
        console.log(row)
        this.dialogVisible = true
        // row.keyId
        this.getsmsContentDetails(row.keyId)
      },
      // 查询待审核接口
      getsmsContentDetails(keyId) {
        this.$axios.getsmsContentDetails({
          id: String(keyId)
        }).then((res) => {
          console.log(res)
          this.SMSaudit = res.data
        })
      },
      // 审核接口
      getsmsContentAudit() {
        this.$axios.getsmsContentAudit({
          bak: this.SMSaudit.bak,
          keyId: this.SMSaudit.keyId
        }).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '处理成功',
              type: 'success'
            });
            this.getsmsContent()
            this.dialogVisible = false;
          }
        })
      },
      // 审核确认按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getsmsContentAudit()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getsmsContent();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getsmsContent();
        // orders = res.data;
      },

    },

    mounted() {
      this.getsmsContent()
    },
  };
</script>
<style scoped>
  .airPort {
    margin: 20px;
  }
</style>